<template>
  <div>
    <div class="dialog" v-if="isshow">
      <h2 class="title">{{ title }}</h2>
      <div class="main">
        <slot name="main" />
      </div>
      <div class="foot">
        <slot name="footer" />
      </div>
    </div>
    <div class="mark" v-if="isshow" @click="hideMe"></div>
  </div>
</template>

<script>
export default {
  props: ["title", "isshow", "hideMe"],
  data() {
    return {};
  },

  components: {},

  methods: {
    setWith() {
      let dialog = document.querySelector(".dialog");
      if (dialog) {
        let iw = dialog.offsetWidth;
        let ih = dialog.offsetHeight;
        dialog.style.transform = `translate(-${iw / 2}px, -${ih / 2}px)`;
      }
      // console.log(mark, 8888);
    }
  },

  //钩子函数  mounded 挂载后
  updated() {
    //更新后
    this.setWith();
  }
};
</script>

<style scoped>
.dialog {
  padding: 20px;
  /* width: 600px;
  height: 400px; */
  background: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  /* transform: translate(-300px, -200px); */
  z-index: 12000;
  /* margin: 0 auto; */
}
.mark {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}
.title {
  width: 100%;
  height: 40px;
  text-align: left;
  font-size: 24px;
  border-bottom: 1px solid #000;
}
.foot {
  width: 100%;
  height: 40px;
  margin-right: 20px;
  text-align: right;
}
</style>